<template>
	<div>
		<mainTop></mainTop>
		<div style="position: fixed;right:20px;top:200px;width:100px;background-color: #ffffff;">
				<div style="text-align: center;"><img src="../images/CPXQ28.jpg" style="width: 90px;height: 90%;margin-top: 5px;margin-bottom: 5px;"/></div><!--dm_emt-->
					<ul class="zc_filxed"  >
					<li><router-link to="/register" target="_blank">展商报名</router-link></li>
				<li><a href="https://zh.heavenk.com/swz/registration.html" target="_blank">观众登记</a></li>
				<li><a href="https://zha.heavenk.com/index" target="_blank">展商后台</a></li>
				</ul>
		</div><!--zc_filxed-->
		<div class="siteDynamics">
			<img src="../images/message.png" alt="" style="margin-left: 25px;float: left;margin-top: 12px;">
			<span style="color: #150e52;font-size: 19px;font-weight: 600;margin-left: 17px;float: left;">现场动态</span>
			<img src="../images/straightLine1.png" alt="" style="margin-left: 18px;float: left;margin-top: 9px;">
      <div class="tongzhi">
        <div class="slide">
          <div class="marquee_list" :class="{ 'marquee_top': animate }">
            <p v-for="item in textArr" :key="item.id" >
              <router-link target="_blank" :to="{ path: '/wzDetail', query: { id: item.articleId} }" 
			  style="display: inline-block;color: #150e52;margin-left: 20px;clear: both;width: 855px;font-size:20px ;font-weight: 500;
			  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;height: 30px;text-decoration: none">
				   {{item.articleTitle}}
				   </router-link></p>
          </div>
        </div>
      </div>
			<!-- <div class="water_tips">
				<div class="water_text"style="display: inline-block;color: #150e52;margin-left: 20px;
				font-size:20px ;font-weight: 500;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">宁夏中宁枸杞产业云博览会现场直播带货力量</div>
			</div> -->
			
		</div>
		<div class="module1Box" style="width: 100%;height: auto;background-color: #f7f7f7;">
			<div class="module1">
				<div class="tqhy">
					<div class="tqhyTitle" >
					<div style="font-size: 36px;color: #150e52;font-weight: 600;">同期会议</div>
					<router-link :to="{ path:'/tqhy'}" 
					style="text-decoration: none; font-size: 16px; display: inline-block;float: right;margin-right: 3px;
					line-height: 50px;height: 50px;font-weight: 550;color: #150e52;position: absolute;right: 0px;top: 0px;">更多&nbsp;
					<img src="../images/moreico.png" width="9px" style="margin-top: -3px;margin-right: 1px;"/></router-link>
					</div>
					
				</div>
				<div style="position: relative;margin-top: 40px;">
									 <div class="changePage">
										 <div class="swiper-button-prev swiper-button-prev2" style="outline: none"></div>
										 <div class="swiper-button-next swiper-button-next2" style="outline: none"></div>
										 <div class="swiper-pagination"></div>
									 </div>
									 <div class="tqhyBox">
									    
									    <swiper ref="swiper"
									      :options="options">
									      <swiper-slide v-for="(item,index) in meeting?meeting.rows.slice(0,5):[]"
									        :key="index">
									        <div class="tqhyCard" style="background-color: white">
									 							<div class="cardTitle" >
																	<img :src="'https://zha.heavenk.com/prod-api'+item.image" alt="" style="width: 100%;height: 234px;">
									 								<!-- <div style="padding: 0px 50px;text-align: center;padding-top: 100px;height: 260px;">  </div> -->
									 							</div>
									 							<div style="padding:11px; background-color: white;">
									 								<div style="color: #150e52;letter-spacing:0px;line-height: 26px;background-color: white;">
									 									{{item.name}}
									 								</div>
									 								<div style="color: #150e52;letter-spacing:0px;line-height: 30px;font-weight: 600;background-color: white">特邀嘉宾：{{ item.guestName }}</div>
									 								<div style="color: #150e52;letter-spacing:0px;line-height: 30px;font-weight: 600;background-color: white">会议时间：{{ item.startTime }}</div>
									 								<a @click="getQrCode(item.qrCode)" class="jrzbj">进入直播间</a>
									 							</div>
									        </div>
									      </swiper-slide>
									    </swiper>
									    
									  </div>
				</div>
								
			</div>
		</div>
		<div class="module2Box" style="width: 100%;min-width: 1700px;    height: auto;background-color: #dee7f8;">
			<div class="module2">
				<div class="title">
				<div style="font-size: 36px;color: #150e52;font-weight: 600;">展商直播</div>
				<router-link :to="{ path:'/zbhf'}"  style="text-decoration: none;font-size: 16px; display: inline-block;float: right;margin-right: 3px;
				line-height: 50px;height: 50px;font-weight: 550;color: #150e52;position: absolute;right: 0px;top: 0px;" href="https://zh.heavenk.com/livelist.html">更多&nbsp;
				<img src="../images/moreico.png" width="9px" style="margin-top: -3px;margin-right: 1px;"/></router-link>
				</div>
				<div style="width: 1140px;margin-top: 48px;" v-if="live">
          <a @click="getQrCode(live.rows[1].liveQrCode)" style="cursor: pointer;">
					<div class="m21" :class="{'m21LeftHover':zszbHover==0}"
							   @mouseover="zszbHover = 0">
						<div style="width: 100%;"><img :src="'https://zha.heavenk.com/prod-api'+this.live.rows[1].liveDetailsImage" alt="" style="width:100%;height: 250px" ></div>
						<div style="margin: auto;line-height: 30px;">
							<div style="color: #150e52;font-weight: 600;font-size: 19px;">{{this.live.rows[1].liveName}}</div>
							<div style="color: #150e52;">{{this.live.rows[1].liveStartTime}}</div>
						</div>
					</div>
          </a>
          <a @click="getQrCode(live.rows[0].liveQrCode)" style="cursor: pointer;">
					<div class="m22" :class="{'m22MiddleHover':zszbHover==1}"
							   @mouseover="zszbHover = 1">
						<div style="width: 100%;"><img :src="'https://zha.heavenk.com/prod-api'+this.live.rows[0].liveDetailsImage" alt="" style="width:100%;height: 250px" ></div>
						<div style="margin: auto;line-height: 30px;">
							<div style="color: #150e52;font-weight: 600;font-size: 19px;">{{this.live.rows[0].liveName}}</div>
							<div style="color: #150e52;">{{this.live.rows[0].liveStartTime}}</div>
						</div>
					</div>
          </a>
          <a @click="getQrCode(live.rows[2].liveQrCode)" style="cursor: pointer;">
					<div class="m23" :class="{'m23RightHover':zszbHover==2}"
							   @mouseover="zszbHover = 2">
						<div style="width: 100%"><img :src="'https://zha.heavenk.com/prod-api'+this.live.rows[2].liveDetailsImage" alt="" style="width:100%;height: 250px" ></div>
						<div style="margin: auto;line-height: 30px;">
							<div style="color: #150e52;font-weight: 600;font-size: 19px;">{{this.live.rows[2].liveName}}</div>
							<div style="color: #150e52;">{{this.live.rows[2].liveStartTime}}</div>
						</div>
					</div>
          </a>
				</div>
			</div>
			
		</div>
		<div class="module3Box" style="width: 100%;height: auto;background-color: #f7f7f7;">
			<div class="module3">
				<div class="title">
				<div style="font-size: 36px;color: #150e52;font-weight: 600;">知名展商</div>
<!--          https://zh.heavenk.com/chateau/20227.html?id=23-->
				</div>
				<div class="zmzsContent">

					<ul>
<!--            :style="{backgroundImage:'url('+require('../images/zmzsimg.png')+')'}"-->
						<li @click="goZsDetail(item.id)" style="cursor: pointer;"
                v-for="(item,index) in exhibitor?exhibitor.rows.slice(0,6):[]"
                :key="index"
                :style="{backgroundImage:'url('+'https://zha.heavenk.com/prod-api'+item.exhibitiorpic+')',backgroundSize: 'auto 100%' }"

            >
             <a style="cursor: pointer;">
							<div class="fg1" >
								
							</div>
							<div style="width:100%;position: absolute;bottom: 45px;color: #fff;text-align: center;z-index: 10px;">
                {{item.exhibitorname}}</div>
							<div style="width:100%;position: absolute;bottom: 20px;color: #fff;text-align: center;">Exhibitor</div>

             </a>
						</li>

					</ul>
				</div>
			</div>
		</div>
		<div class="module4Box" style="width: 100%;height: auto;">
			
			<div class="module4">
				<div class="hzhgTop">
					<div style="color: #fff;font-size: 45px;text-align: left;margin-left: 170px;padding-top: 46px;font-weight: 600;" >
						展&nbsp;会&nbsp;回&nbsp;顾</div>
					<div style="margin-right: 145px;text-align: right;margin-top: 7px;">
						<a style="text-decoration: none;cursor: pointer;" @click="goSphf()">
              <span style="color: #fff;">探索展会之旅</span>
						<img src="../images/zhhgico.png"  style="width: 18px;margin-left: 6px;margin-top: -4px;"alt="">
            </a>
					</div>
					
				</div>
				<div>
					<div style="margin-top: 74px;text-align: left;line-height: 112px;margin-left: 82px;">
						<div style="color: #fff;font-size: 36px;">历届展会回顾</div>
						<div style="color: #fff;font-size: 36px;">Exhibition review</div>
					</div>
					<div style="" class="zhhgList">
						<ul>
							<li>
								<a style="text-decoration: none;color:white;cursor: pointer;" @click="goHyjb()">
									会议嘉宾</a></li>
							<li><a @click="goSphf()" style="cursor: pointer;">视频回放</a></li>
						</ul>
						<div style="width: 300px;height: 70px;background-image: url('../images/zhmoreBg.png');"></div>
					</div>
					<div class="zhmore">
						<div style="font-size: 34px;height:62px;color: #150e52;display: inline-block;
						line-height: 62px;margin-left: 16px;">
              <a @click="goSphf()"style="color: #150e52;cursor: pointer;">展会回顾</a>
						</div>
						<img src="../images/moreico.png" alt="" style="width: 17px;margin-left: 14px;margin-top: -14px;">
					</div>
				</div>
				
			</div>
		</div>
		<div class="module5Box" style="width: 100%;height: auto;">
			<div class="module5">
				<div class="title">
				<div style="font-size: 36px;color: #150e52;font-weight: 600;">展馆展示</div>
<!--				<a style="font-size: 16px; display: inline-block;float: right;margin-right: 3px;-->
<!--				line-height: 50px;height: 50px;font-weight: 550;color: #150e52;position: absolute;right: 2px;top: 0px;">更多&nbsp;-->
<!--				<img src="../images/moreico.png" width="9px" style="margin-top: -3px;margin-right: 1px;"/></a>-->
				</div>
				<div class="zgzsContent" v-if="exhibition.rows">
									<div class="module5_m1">
										<router-link target="_blank" :to="{ path: '/zgzs', query: { id: this.exhibition.rows[0].id} }" >
				            <!-- <a target="_blank" href="https://zh.heavenk.com/list.html"> -->
										<div class="module5_m11"
				                 :style="{backgroundImage:'url('+'https://zha.heavenk.com/prod-api'+this.exhibition.rows[0].exhibitionhallpictures+')',backgroundSize: 'auto 100%',backgroundPosition:'0%' }">
											<div style="font-size: 22px;color: rgb(255, 255, 255);text-align: left;margin-left: 37px;margin-top: 31px;width: 200px;height: 100px;line-height: 38px;" v-if="exhibition.rows[0]">
												<div>
													{{this.exhibition.rows[0].id}}号馆
												</div>
												<div>
				                  {{this.exhibition.rows[0].exhibitionhallname}}
												</div>
												<div class="fg2">
													
												</div>
											</div>
										</div>
				            <!-- </a> -->
										</router-link>
										<router-link target="_blank" :to="{ path: '/zgzs', query: { id: this.exhibition.rows[1].id} }" >
				            <!-- <a target="_blank" href="https://zh.heavenk.com/list.html"> -->
										<div class="module5_m11" v-if="exhibition.rows[1]"
				                 :style="{backgroundImage:'url('+'https://zha.heavenk.com/prod-api'+this.exhibition.rows[1].exhibitionhallpictures+')',backgroundSize: 'auto 100%',backgroundPosition:'0%' }"
				            >
											<div style="font-size: 22px;color: rgb(255, 255, 255);text-align: left;margin-left: 37px;margin-top: 31px;width: 200px;height: 100px;line-height: 38px;">
												<div>
				                  {{this.exhibition.rows[1].id}}号馆
												</div>
												<div>
				                  {{this.exhibition.rows[1].exhibitionhallname}}
												</div>
												<div class="fg2">
													
												</div>
											</div>
										</div>
									</router-link>
				            <!-- </a> -->
									<router-link target="_blank" :to="{ path: '/zgzs', query: { id: this.exhibition.rows[2].id} }" >
				            <!-- <a target="_blank" href="https://zh.heavenk.com/list.html"> -->
										<div class="module5_m13" v-if="exhibition.rows[2]"
				                 :style="{backgroundImage:'url('+'https://zha.heavenk.com/prod-api'+this.exhibition.rows[2].exhibitionhallpictures+')',backgroundSize: 'auto 100%',backgroundPosition:'0%' }"
				            >
											<div style="font-size: 22px;color: rgb(255, 255, 255);text-align: left;margin-left: 37px;margin-top: 31px;width: 200px;height: 100px;line-height: 38px;">
												<div>
				                  {{this.exhibition.rows[2].id}}号馆
												</div>
												<div>
				                  {{this.exhibition.rows[2].exhibitionhallname}}
												</div>
												<div class="fg3">
													
												</div>
											</div>
										</div>
									</router-link>
				            <!-- </a> -->
									</div>
				
									<div class="module5_m1">
									<router-link target="_blank" :to="{ path: '/zgzs', query: { id: this.exhibition.rows[3].id} }" >
				            <!-- <a target="_blank" href="https://zh.heavenk.com/list.html"> -->
										<div class="module5_m11" v-if="exhibition.rows[3]"
				                 :style="{backgroundImage:'url('+'https://zha.heavenk.com/prod-api'+this.exhibition.rows[3].exhibitionhallpictures+')',backgroundSize: 'auto 100%',backgroundPosition:'0%' }"
				            >
											<div style="font-size: 22px;color: rgb(255, 255, 255);text-align: left;margin-left: 37px;margin-top: 31px;width: 200px;height: 100px;line-height: 38px;">
												<div>
				                  {{this.exhibition.rows[3].id}}号馆
												</div>
												<div>
				                  {{this.exhibition.rows[3].exhibitionhallname}}
												</div>
												<div class="fg2">
													
												</div>
											</div>
										</div>
									</router-link>
				            <!-- </a> -->
							<router-link target="_blank" :to="{ path: '/zgzs', query: { id: this.exhibition.rows[4].id} }" >
										<div class="module5_m11" v-if="exhibition.rows[4]"
				                 :style="{backgroundImage:'url('+'https://zha.heavenk.com/prod-api'+this.exhibition.rows[4].exhibitionhallpictures+')',backgroundSize: 'auto 100%',backgroundPosition:'0%' }"
				            >
											<div style="font-size: 22px;color: rgb(255, 255, 255);text-align: left;margin-left: 37px;margin-top: 31px;width: 200px;height: 100px;line-height: 38px;" >
												<div>
				                  {{this.exhibition.rows[4].id}}号馆
												</div>
												<div>
				                  {{this.exhibition.rows[4].exhibitionhallname}}
												</div>
												<div class="fg2">
													
												</div>
											</div>
										</div>
							</router-link>
				            
				            <!-- </a> -->
							<router-link target="_blank" :to="{ path: '/zgzs', query: { id: this.exhibition.rows[5].id} }" >
				            <!-- <a target="_blank" href="https://zh.heavenk.com/list.html"> -->
										<div class="module5_m13" v-if="exhibition.rows[5]"
				                 :style="{backgroundImage:'url('+'https://zha.heavenk.com/prod-api'+this.exhibition.rows[5].exhibitionhallpictures+')',backgroundSize: 'auto 100%',backgroundPosition:'0%' }"
				            >
											<div style="font-size: 22px;color: rgb(255, 255, 255);text-align: left;margin-left: 37px;margin-top: 31px;width: 200px;height: 100px;line-height: 38px;" >
												<div>
				                  {{this.exhibition.rows[5].id}}号馆
												</div>
												<div>
				                  {{this.exhibition.rows[5].exhibitionhallname}}
												</div>
												<div class="fg3">
													
												</div>
											</div>
										</div>
							</router-link>
            <!-- </a> -->
					</div>
				</div>
			</div>
		</div>
		<div class="module6Box" style="width: 100%;height: auto;">
			<div class="module6">
				<div class="title">
				<div style="font-size: 36px;color: #150e52;font-weight: 600;">推荐产品</div>

				</div>
				<div class="tjcpMenu" v-if="productType.data" @mouseleave="tjcpMenuHover=selectedtjcpMenu">
					<div :class="{'tjcpMenuHover':tjcpMenuHover===index||selectedtjcpMenu==index}"
               v-for="(item,index) in productType.data"
               :key="index"
               @mouseover="tjcpMenuHover = index"
               @click="checkProductType(item.dictLabel),selectedtjcpMenu=index"
               style="cursor: pointer; display: inline-block;width:115px;height: 34px;color: #150e52;line-height: 34px;border-radius: 15px;margin-right: 40px;margin-left: 40px;font-size: 20px;">{{item.dictLabel}}</div>				
				</div>
        <div v-else>Loading...</div>

        <div class="tjcpContent" style="">
					<div class="tjcp_module"
               v-for="(item,index) in finalProduct"
               :key="index"
          >
						<!-- <a @click="goProductDetail(item.id)" style="cursor: pointer;"> -->
						<router-link  target="_blank" :to="{ path: '/productDetail', query: { id: item.id} }" style="text-decoration: none;">
						<div><img :src="'https://zha.heavenk.com/prod-api'+item.exhibitionproductspic" alt="" style="width: 272px;height: 243px;z-index: 100;"></div>
						<div style="padding: 10px 15px;">
							<div style="width: 242px;height: 25px;overflow: hidden;text-overflow: ellipsis;text-align: center;color: #150e52;font-size: 18px;font-weight: 600;" >{{ item.product }}</div>
							<div style="width: 242px;height: 48px;overflow: hidden;text-overflow: ellipsis;text-align: left;color: #150e52;margin-top: 10px;line-height: 23px;" v-html="item.productintroduction"></div>
						</div>
						</router-link>
            <!-- </a> -->
						
					
					</div>
				</div>
			</div>
		</div>
		<el-dialog
		  
		  :visible.sync="centerDialogVisible"
		  width="810px"
		
		  center>
		  <div class="dialogLeft" style="">
			  <!-- <img src="../images/dialogBg.png" style="width: 100%;height: 100%;" alt=""> -->
			  <div style="text-align: center;margin-top: 130px;">
				  <img src="../images/12.png" style="width: 60px;" alt="">
			  </div>
			  <div style="margin-left: 10px;margin-top: 60px;">
				  <img src="../images/diaText.png" alt="">
			  </div>
			  
			  </div>
			<div style="text-align: center;margin-top: 105px;">
				<img :src="this.QrCode" style="width: 190px;height:190px;" alt="">
				<div style="font-size: 28px;color: #201b1b;margin-top: 20px;letter-spacing: 2px;">
					扫码 <div style="font-weight: 600;margin-top: -1px;margin: 0px 5px; display: inline-block;">—</div> 进入直播间
				</div>
			</div>
		 
		</el-dialog>
		<mainBottom></mainBottom>
	</div>
</template>

<script>
import 'swiper/css/swiper.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import mainTop from '../components/mainTop.vue'
import mainBottom from '../components/mainBottom.vue'
import axios from 'axios';
export default {
  components: { 
	  Swiper, 
	  SwiperSlide,
	  mainTop,
	  mainBottom
   },
  
  data() {
    return {
		centerDialogVisible: false,
		QrCode:'',
      	animate: false,
      	textArr:[
			{ "articleTitle":'口感甜润1，舒顺柔协，余味持久，风格典型独特'},
			{"articleTitle":'口感甜润2，舒顺柔协，余味持久，风格典型独特'},
			{"articleTitle":'口感甜润3，舒顺柔协，余味持久，风格典型独特'},
		],
		allUrl:'https://zha.heavenk.com/prod-api',
		notice:'',
		meeting:'',
		exhibitor:'',
		live:'',
		exhibition:'',
		productType:{
			"msg": "操作成功",
			"code": 200,
			"data": [
			{
				"searchValue": null,
				"createBy": "admin",
				"createTime": "2022-07-25 08:47:42",
				"updateBy": null,
				"updateTime": null,
				"remark": null,
				"params": {},
				"dictCode": 77,
				"dictSort": 1001,
				"dictLabel": "枸杞",
				"dictValue": "1001",
				"dictType": "type",
				"cssClass": null,
				"listClass": "default",
				"isDefault": "N",
				"status": "0",
				"default": false
			},
			{
				"searchValue": null,
				"createBy": "admin",
				"createTime": "2022-07-25 11:03:20",
				"updateBy": null,
				"updateTime": null,
				"remark": null,
				"params": {},
				"dictCode": 78,
				"dictSort": 1002,
				"dictLabel": "奇亚籽",
				"dictValue": "1002",
				"dictType": "type",
				"cssClass": null,
				"listClass": "default",
				"isDefault": "N",
				"status": "0",
				"default": false
			}
			]
		},
		webTwo:'',
		checkType:'枸杞',
		finalProduct:'',
			tjcpMenuHover:0,
			selectedtjcpMenu:0,
			zszbHover:1,
		options: {
			pagination: {
			el: ".case-swiper-pagination"
			//区分不同Swiper的组件
			},
			//显示分页
			// loop: true,
			//开启循环
			loopedSlides: 6,
			//设置平滑
			slidesPerView: 3,
				spaceBetween:0,
			//设置能够同时显示的数量（可设置 auto）
			speed: 1000,
			//切换速度
	
			navigation: {
			prevEl: ".swiper-button-prev2",
			nextEl: ".swiper-button-next2"
			},
			//左右箭头按钮(可自定义)
			pagination: {
				el: '.swiper-pagination',
				clickable: true, // 分页器可以点击
				renderBullet: function (index, className) {
						return '<a style="font-size:40px;z-index:50;text-decoration-line: underline;text-decoration-color: #fff;" class="' + className + '">' +'0'+ (index + 1) + '</a>';
				},
			},
			autoplay: false,
			//是否开启自动轮播
	
			// autoplay: {
			//   delay: 1000,
			//   stopOnLastSlide: false,
			//   disableOnInteraction: false
			// },
			// 开启自动轮播后，设置自动轮播的延迟时间
			// loopAdditionalSlides: 1,
			//复制若干个slide
			slidesPerGroup: 3,
			
			// 定义slides的数量多少为一组，即每次切换slides的数量，默认每次切换一张
			on: {
			slideChangeTransitionEnd: function() {
				//console.log(this.activeIndex);
				//获取当前下标，切换结束时，告诉我现在是第几个slide
			}
			}
      	}
    };
  },
  created() {
    this.getNotice();
    this.getMeeting();
    this.getLive();
    this.getExhibitor();
    this.getExhibition();
    this.getProductType();
    this.getWebTwo();
    setInterval(() => {
      this.startMove()
    }, 5000)
  },
  /* 引入组件 */
  computed: {
    swiper() {
      return this.$refs.swiper.$swiper;
    }

  },
  methods: {
	getQrCode(qrcode){
		this.centerDialogVisible=true
		this.QrCode='https://zha.heavenk.com/prod-api'+ qrcode
	},
    getWebTwo(){
      axios.get('https://zha.heavenk.com/prod-api/web/two/list').then((res)=>{
        this.webTwo=res.data
        this.checkProductType('枸杞')
      })
    },
    getProductType(){
      axios.get('https://zha.heavenk.com/prod-api/system/dict/data/type/type').then((res)=>{
        this.productType=res.data
      })
    },
    getExhibition(){
      axios.get('https://zha.heavenk.com/prod-api/web/exhibition/list').then((res)=>{
        this.exhibition=res.data
      })
    },
    getNotice(){
      axios.get('https://zha.heavenk.com/prod-api/web/article/articleType').then((res)=>{
        this.notice=res.data
        this.textArr=res.data.rows
        // console.log(res.data.rows)
      })
    },
    getMeeting(){
      axios.get('https://zha.heavenk.com/prod-api/web/meeting/list').then((res)=>{
        this.meeting=res.data
      })
    },
    getLive(){
      axios.get('https://zha.heavenk.com/prod-api/web/gooseLive/end').then((res)=>{
        this.live=res.data
      })
    },
    getExhibitor(){
      axios.get('https://zha.heavenk.com/prod-api/web/exhibitor/list').then((res)=>{
        this.exhibitor=res.data
      })
    },
	goProductDetail(pid){
		var { href } = this.$router.resolve({
		    path: '/productDetail',
		});
		 localStorage.setItem("id", pid)
		 window.open(href, '_blank')
			 
	},
	goZsDetail(pid){
		let routeData = this.$router.resolve({
		       path: '/zsDetail',
		      query: {
									id:pid,
									}
		     })
		     window.open(routeData.href, '_blank')
			 
	},
	goSphf(){
		var { href } = this.$router.resolve({
		    path: '/sphf',
		});
		 window.open(href, '_blank')
	},
	goHyjb(){
		var { href } = this.$router.resolve({
		    path: '/hyjb',
		});
		 window.open(href, '_blank')
	},
    checkProductType(label){
      //console.log(label)
      //console.log(this.webTwo)
      this.finalProduct=''
      var arr=[]
      for(let index=0;index<this.webTwo.rows.length;index++){
        if (this.webTwo.rows[index].productType===label){
          //console.log('fuck')
          arr.push(this.webTwo.rows[index])
        }
      }
      this.finalProduct=arr
      //console.log(arr)
    },

    swiper_enter() {
      this.swiper.autoplay.stop();
    },
    //鼠标悬停停止swiper自动轮播
    swiper_leave() {
      this.swiper.autoplay.start();
    },
    //鼠标移出开启swiper自动轮播
    startMove () {
      this.animate = true
      setTimeout(() => {
        this.textArr.push(this.textArr[0])
        this.textArr.shift()
        this.animate = false
      }, 1000) // 时间和动画时间保持一致
    },
  }
};

</script>

<style>
.tongzhi{
  color: #2d8cf0;
  min-width: 460px;
  height: 30px;
  overflow: hidden;
  margin-top: 13px;
}
.tongzhi .slide{
  position: relative;
}
.tongzhi .slide .text{
  cursor: pointer;
  height: 0;
}
.marquee_top {
  transition: all 1s;
  margin-top: -60px
}
.marquee_list {
  display: block;
  position: absolute;
  top: -13px;
  left: 55px;
  cursor: pointer;
}
	body{
		background-color: #f7f7f7;
	}
  .list-leave-active,
  .list-enter-active {
    transition: all 0.5s ease;
  }
  .list-leave-active,
  .list-enter {
    height: 0px !important;
    margin-top: 0px !important;
  }
  .list-leave,
  .list-enter-active {
    height: auto;
    margin-top: auto;
  }
  .list-enter-from{
    opacity: 0;
  }
  .list-enter-to{
    opacity: 1;
  }
  .list-leave-from{
    opacity: 1;
  }
  .list-leave-to{
    opacity: 0;
  }
	@-webkit-keyframes rowup {
	    0% {
	        -webkit-transform: translate3d(0, 0, 0);
	        transform: translate3d(0, 30px, 0);
	    }
	    100% {
	        -webkit-transform: translate3d(0, -307px, 0);
	        transform: translate3d(0, -350px, 0);
	    }
	}
	@keyframes rowup {
	    0% {
	        -webkit-transform: translate3d(0, 0, 0);
	        transform: translate3d(0, 30px, 0);
	    }
	    100% {
	        -webkit-transform: translate3d(0, -307px, 0);
	        transform: translate3d(0, -350px, 0);
	    }
	}
	 
	.demo-list{
	       width: 855px;
	      /* border: 1px solid #999; */
	       margin: 20px auto;
	       position: relative;
	       height: 28px;
         line-height: 60px;
	       display: inline-block;
	       margin-top: 8px;
	}
	 .item{
		 margin:0px ;
		 padding: 0px;
	 }
	.demo-list .rowup{
	    -webkit-animation: 10s rowup linear infinite normal;
	    animation: 10s rowup linear infinite normal;
	    position: relative;
	}
	.swiper-pagination-bullet-active{
		font-size: 55px !important;
		background-color: #150e52;
		margin-right: 10px;
		margin-left: -10px;
	}
	.swiper-pagination-bullet{
		border-radius:0px !important;
		/* width: 100px;
		height: 100px; */
		color: #fff;
		padding-left: 44px;
		padding-right: 30px;
		background-color: rgba(0,0,0,0);
		
	}
	.swiper-pagination-clickable{
		cursor: none;
	}
	.mainTop{
		width: 100%;
		min-width: 1700px;
		height: 750px;
		background-image: url('../images/bg1.jpg');
		background-size: 100% 100%;
		text-align: center;
	}
	.titleLogo{
		float: left;
		margin-left: 125px;
	}
	.nav{
		margin-left: 60px;
		height: 80px;
		float: left;
	}
	.nav ul{
		list-style: none;
		float: left;
	}
	.nav ul li{
		float: left;
		margin-left: 40px;
	}
	.nav ul li a{
		color: white;
		text-decoration: none;
		font-size: 19px;
		font-weight: 500;
		
	}
	.topTitleImg{
		width: 1140px;
		margin: auto;
	}
	.module1{
		width: 1140px;
		min-width: 1140px;
		height: 590px;
		margin: auto;
		
	}
	.siteDynamics{
		width: 1140px;
		min-width: 1140px;
		height: 60px;
		margin: auto;
		line-height: 60px;
		background-color: #fff;
		margin-top: -30px;
		 overflow: hidden;
	}
	.tqhy{
		width: 1140px;
		margin: auto;
		text-align: center;
		margin-top: 60px;
	}
	.tqhyTitle{
		width: 1140px;
		position: relative;
	}
	.tqhyBox {
	  width: 894px;
	  height: 430px;
	  display: inline-block;
	  float: right;
	  margin: 0 auto;
	  position: absolute;
	  right: -3px;
	  top: 28px;
	  .swiper-slide {
		  
	    .tqhyCard {
	      width: 298px !important;
	      height: 430px;
		    background-color: #fff;
	      /* background: url("../images/img1.png")
	        no-repeat;
	      background-size: 289px 397px; */
	      position: relative;
	      //cursor: pointer;
	    }
	  }
	}
	.swiper-slide{
		transform: scale(0.92);
		width: 298px !important;
		height: 430px;
	}
	.swiper-slide.swiper-slide-active {
		transform: scale(1);
		width: 298px !important;
		height: 430px;
		margin-right: 12px;
		box-shadow: 5px 5px 10px -4px rgba(0,0,0,0.2);
		
    background-color: white;
/* 		    width: 281px !important;
		    height: 426px !important; */
	}
	.cardTitle{
		width: 100%;
		height: 234px;
		background-image: url('../images/tqhySideImg1.png');
		background-size: 100% 100%;
		color: #fff;
		font-size:18px;
		margin: auto;
	}
	.jrzbj{
		color: rgb(255, 255, 255);
		font-size: 16px;
		text-decoration: none;
		background-color: rgb(21, 14, 82);
		width: 102px;
		display: inline-block;
		height: 30px;
		line-height: 30px;
		border-radius: 14px;
		text-align: center;
		font-weight: 600;
		margin-top: 6px;
		font-family: PingFangSC-Thin, sans-serif;
		cursor: pointer;
	}
	.changePage .swiper-button-next{
		top: 252px !important;
		left: 148px !important;
		width: 64px;
		height: 64px;
		border: 2px solid #fff;
		border-radius: 100%;
		
	}
	.changePage .swiper-button-prev:after{
		content: '\2190';
		color: #fff;
		font-size: 32px;
		    
	}
	.changePage .swiper-button-next:after{
		/* background-image: url('../images/next.png');
		background-size: 100% 100%; */
		content: '\2192';
		color: #fff;
		font-size: 32px;
	}
	.changePage .swiper-button-prev{
		top: 141px;
		left: 148px;
		width: 64px;
		height: 64px;
		border: 2px solid #fff;
		border-radius: 100%;	
		cursor: pointer;
	}
	.changePage .swiper-button-prev.swiper-button-disabled,.changePage .swiper-button-next.swiper-button-disabled{
		opacity: 1;
	}
	.changePage .swiper-pagination{
		width: 240px;
		/* background-color: #ddd; */
		bottom: 66px;
		left: 8px;
	}
	.changePage{
		width: 367px;
		height: 487px;
		background-color: #150e52;
		display: inline-block;
		position: relative;
	}
	.module2{
		width: 1140px;
		min-width: 1140px;
		height: 450px;
		margin: auto;
		text-align: center;
		padding-top: 20px;
		margin-top: 25px;
	}
	.title{
		width: 1140px;
		position: relative;
	}
	.m21{
		 width: 363px;
		 height: 315px;
		 background-color: #fff;
		 float: left;
		 margin-right: 10px;
	}
	.m21LeftHover{
		width: 364px;
		height: 315px;
		background-color: #fff;
		float: left;
		margin-right: 20px;
		transform: scale(1.1);
	}
	.m22{
		width: 363px;
		height: 315px;
		background-color: #fff;
		float: left;
		margin-left: 10px;
		margin-right: 10px;
	}
	.m22MiddleHover{
		width: 363px;
		height: 315px;
		background-color: #fff;
		float: left;
		margin-left: 15px;
		margin-right: 16px;
		transform: scale(1.1);
	}
	.m23{
		width: 363px;
		height: 315px;
		background-color: #fff;
		float: left;
		margin-left: 10px;
	}
	.m23RightHover{
		width: 363px;
		height: 315px;
		background-color: #fff;
		float: left;
		margin-left: 15px;
		transform: scale(1.1);
	}
	.module3{
		width: 1140px;
		min-width: 1140px;
		height: 800px;
		margin: auto;
		text-align: center;
		padding-top: 20px;
	}
		
	.zmzsContent{
		margin-top: 30px;
		width: 100%;
		height: 800px;
	}
	.zmzsContent>ul{
		list-style: none;
	}
	.zmzsContent>ul>li .fg1{
		position: absolute;
		width: 173px;
		height: 570px;
		 left: -110%;
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
		transform: skew(-30deg);
		z-index: -1;
	}
	.zmzsContent>ul li{
		overflow: hidden;
		position: relative;
	}
	.zmzsContent>ul li:hover .fg1{
		left: 150%;
		transition: all .3s;
	}
	
	.zmzsContent>ul li:hover {
	            transform: translateY(-20px);
	            box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
				
	        }
	.zmzsContent>ul li:nth-child(even){
		width: 173px;
		height: 570px;
		//background-image: url('../images/zmzsimg.png');
		//background-size: 100% 100%;
		float: left;
		margin-right:20px;
		margin-top: 50px;
		position: relative;
	}
	.zmzsContent>ul li:nth-child(odd){
		width: 173px;
		height: 570px;
		//background-image: url('../images/zmzsimg.png');
		//background-size: 100% 100%;
		float: left;
		margin-right: 20px;
		position: relative;
	}
	.zmzsContent>ul li:nth-child(6){
		width: 173px;
		height: 570px;
		//background-image: url('../images/zmzsimg.png');
		//background-size: 100% 100%;
		float: left;
		margin-right: 0px;
		position: relative;
	}
	.module4Box{
		background-image: url('../images/zhhgBg.png');
		background-size: 100% 100%;
		height: 800px;
		margin-top: 100px;
		min-width: 1700px;
		width: 100%;
	}
	.module4{
		width: 1140px;
		min-width: 1140px;
		height: 610px;
		margin: auto;
		text-align: center;
		padding-top:20px;
	}
	.hzhgTop{
		width: 1140px;
		min-width: 1140px;
		height: 160px;
		margin-top: -100px;
		background-image: url('../images/zhhgTop.png');
		background-size: 100% 100%;
	}
	.zhhgList{
		text-align: left;
		margin-left: 114px;
		margin-top: 105px;
		width: 600px;
		height: 70px;
		float: left;
		display: inline-block;
	}
	.zhhgList ul{
		
	}
	.zhhgList ul li{
		float: left;
		font-size: 36px;
		color: #fff;
		margin-right: 110px;
		list-style: square;
	}
	.zhhgList ul li::marker{
		font-size: 42px;
	}
	.zhmore{
		width: 283px;
		height: 62px;
		background-image: url('../images/zhmoreBg.png');
		background-size: 100% 100%;
		display: inline-block;
		float: right;
		margin-top: 105px;
		margin-right: 2px;
	}
		
	.module5{
		width: 1140px;
		min-width: 1140px;
		height: 790px;
		margin: auto;
		text-align: center;
		margin-top:50px;
	}
	.zgzsContent{
		width: 1140px;
		min-width: 1140px;
		height: 610px;
		margin-top: 40px;
	}
	.module5_m1{
		width: 100%;
		height: 353px;
	}
	.module5_m11{
		width: 259px;
		height: 340px;
		//background-image: url('../images/zgzsImg1.png');
		//background-size: 100% 100%;
		display: inline-block;
		margin-right: 13px;
		float: left;
		overflow: hidden;
		position: relative;
		transition: all .2s;
	}
	.module5_m11:hover {
	    transform: translateY(-10px);
	    box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
	}
	.fg2{
		position: absolute;
		left: -110%;
		top: 0;
		width: 259px;
		height: 340px;
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
		transform: skew(-30deg);
	}
	.module5_m11:hover .fg2{
		left: 110%;
		transition: all .3s;
	}
	
	.module5_m13{
		width: 593px;
		height: 340px;
		//background-image: url('../images/zgzsImg2.png');
		//background-size: 100% 100%;
		display: inline-block;
		float: left;
		overflow: hidden;
		position: relative;
		transition: all .2s;
	}
	.module5_m13:hover{
		transform: translateY(-10px);
		box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
	}
	.fg3{
		position: absolute;
		left: -110%;
		top: 0;
		width: 593px;
		height: 340px;
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
		transform: skew(-30deg);
	}
	.module5_m13:hover .fg3{
		left: 110%;
		transition: all .3s;
	}
	.module6{
		width: 1140px;
		min-width: 1140px;
		max-height: 925px;
		margin: auto;
		text-align: center;
		margin-top:50px;
	}
	.tjcpMenu{
		width: 100%;
		margin-top: 20px;
	}
	.tjcpMenuHover{
		background-color: #150e52;
		color: #fff !important;
		
	}
	.tjcp_module:hover,.tjcp_moduleRight:hover{
		transform: translateY(-10px);
		box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
	}
	.tjcp_module{
		width: 272px;
		height: 370px;
		background-color: #fff;
		display: inline-block;
		margin-right: 17px;
		margin-top: 18px;
		overflow: hidden;
		position: relative;
		transition: all .2s;
	}
	.tjcp_module:hover .fg4,.tjcp_moduleRight:hover .fg4{
		left: 110%;
		transition: all .1s;
	}
	.fg4{
		position: absolute;
		left: -110%;
		top: 0;
		width: 593px;
		height: 340px;
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
		transform: skew(-30deg);
	}
	.tjcp_moduleTitle{
		
	}
	.tjcpContent{
		margin-top: 22px;
		text-align: left;
		min-height: 400px;
	}
	.tjcp_module:nth-child(4n){
		width: 272px;
		height: 370px;
		background-color: #fff;
		display: inline-block;
		margin-top: 18px;
		overflow: hidden;
		position: relative;
		transition: all .2s;
		margin-right: 0px !important;
	}
	.mainBottom{
		width: 100%;
		background-color: #150e52;
		height: 380px;
		min-width: 1700px;
		margin-top: 40px;
	}
	
	
	.zc_filxed {
		width: 100%;
		list-style: none;
	}
	.zc_filxed li{
		text-align: center;
		border-top: 2px solid #dee7f8;
	}
	.zc_filxed li:hover{
		text-align: center;
		border-top: 2px solid #dee7f8;
		color:#fff ;
		background-color: #150e52;
		}
	.zc_filxed li a{
		text-decoration: none;
		display:block;
		color: #150e52;
		line-height: 40px;
		}
	.zc_filxed li a:hover{
		text-decoration: none;
		color: #fff;
		line-height: 40px;
		}
</style>